Skip to content

React-09 项目优化、项目坑

一、项目优化

减少标签

<></>可以使用空标签,当输入的为空标签时,渲染的默认是<React.Fragment></React.Fragment>

严格模式

React.StrictMode

严格模式只在开发模式下运行,不会与生产模式冲突,可以在任何地方使用,如同Fragment;

Strict mode有助于:

  • 识别具有不安全生命周期的组件
  • 有关旧式字符串ref用法的警告(使用第三方库很难确保不使用这些生命周期的方法,加上这个可以帮忙判断)
  • 关于已弃用的findDOMNode用法的警告(findDOMNode是传入一个ref则可以获取真实dom元素)
  • 检测意外的副作用
  • 检测遗留的context API

重复渲染问题

  1. 使用shouldComponentUpdate来解决
jsx
shuldComponentUpdate(nextProps,nextState){
    if(nextProps.num === this.props.num){
        return false
    }
    return true
}
  1. 使用PureComponent来解决,替换component为PureComponent,因为PureComponent会对数据进行比较
jsx
class App extends React.PureComponent{}  // 会根据props是否变化, 来解决重复渲染
  1. 函数组件使用memo包裹;
jsx
function App(){}
const App2 = React.memo(App)

关于首屏加载慢

下载骨架屏:https://github.com/danilowoz/react-content-loader#examples

使用ReactDOMServer来加载首屏;

长列表优化

使用官方推荐的长列表:react-window;

错误边界处理

(1)创建一个文件ErrorBoundary.js,写入以下内容

jsx
export default class ErrorBoundary extends React.Component {
    state = {
        hasError: false,
        error: null,
        errorInfo: null
    }
    // 子元素发生错误时执行该事件
    componentDidCatch(error,errorInfo){
        this.setState({
            hasError: true,
            error,
            errorInfo
        })
    }
    render() {
        if(this.state.hasError){
            // 出错渲染render方法,render在使用该组件时定义
            return <div>{this.props.render(this.state.error,this.state.errorInfo)}</div>
        }
        // 没有出错则渲染子元素, 当子元素出错会触发compnentDidCatch
        return this.props.children
    }
}

(2)使用该组件

jsx
function App(){
    return (
        <ErrorBoundary render={() => <p>出错了</p>}>
            <div>哈哈</div>
        </ErrorBoundary>
    )
}

路由按需加载

  1. 安装:react-loadable
  2. 使用
jsx
import Loadable from 'react-loadable' // 引入按需加载
import Loading from '@/common/Loading' // 引入loading组件, 加载组件时显示
const SelectComponent = Loadable({
    loader: () => import('@/components/Select'),
    loading: Loading
})

二、项目坑

  1. 在声明state时,初始化不要使用null,将null换为空字符串则不会报错;

在有使用请求数据,数据为对象时,获取对象里面的对象会报错,可以在render(){}的return前面判断一下,如果没有数据,则return

js
if(!this.state.list) return true // 则不会执行下面的;

// 请求数组没有数据同理
if(!arr.length) return true //true必须填写 否则报错;
  1. 解决项目需要点击两次的问题(所有两次都可以通过定时器解决)

原因:是因为第一次没有拿到数据就去渲染了,所以数据不是最新的,延时一下就解决了;

image

ios输入框导致页面上移

将以下代码放到生命周期DidMount里面

jsx
let timer
const inputBlur = e => {
    if(e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input'){
      timer.current = setTimeout(()=>{
        window.scrollTo(0,0)
      },4)
    }
}
const inputFocus = e => {
   if(e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input'){
      clearTimeout(timer.current)
    }
}
父元素.addEventListener('focusout',inputBlur, false)
父元素.addEventListener('focusin', inputFocus, false)

解决内存泄露

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method 报红

原因:在willMount中有setState的事件,

jsx
class Test extends React.Component {
    _isMounted = false
    componentDidMount(){
        this._isMounted = true
        this._isMounted && this.setState({...})
    }
    componentWillUnmount(){
        this._isMounted = false
    }
}

常发生场景:

  • 定时器
  • 网络请求
  • 事件监听

在组件销毁前都应得到相应的处理

例子可以使用这个定时器触发

jsx
const MyApi = {
    count: 0,
    subscribe(cb) {
        this.intervalId = setInterval(() => {
            this.count += 1;
            cb(this.count);
        }, 1000);
    },
    unSubscribe() {
        clearInterval(this.intervalId);
            this.reset();
        },
    reset() {
        this.count = 0;
    }
};
  1. 解决链接出现callback is not defined

在window上面添加一个callback方法即可;

jsx
window.callback = function () {}

不能用作JSX组件

参考链接:解决React中遇到的 “xxxx”不能用作 JSX 组件 问题

  1. 在package.json添加如下

    json
    "resolutions": {
      "@types/react": "17.0.44"
    },
  2. 重新安装@types/react

    bash
    pnpm add @types/react@17.0.44

Released under the MIT License.